<template>
  <div class="wh" style="padding: 0 20px; box-sizing: border-box">
    <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="任务名称">
        <el-input v-model="form.desc" type="text" />
      </el-form-item>
      <el-form-item label="绘制方式">
        <el-button-group>
          <el-button type="mini" @click="drawretangle">矩形</el-button>
          <el-button type="mini" @click="drawpolygon">多边形</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="裁切/分幅">
        <el-button-group>
          <el-popover
            placement="top-start"
            trigger="hover"
            width=""
            content="this is content, this is content, this is content"
          > 
            <div style="" class="fc">
              <el-radio-group v-model="radio1" size="large" style="width: 100px;">
                <el-radio label="1:5000" value="5000" />
                <el-radio label="1:10000" value="10000" />
                <el-radio label="1:25000" value="25000" />
                <el-radio label="1:50000" value="50000" />
                <el-radio label="1:100000" value="100000" />
                <el-radio label="1:250000" value="250000" />
                <el-radio label="1:500000" value="500000" />
                <el-radio label="1:1000000" value="1000000" />
              </el-radio-group>
              <el-button type="primary" size="small" @click="fenfuguobiao">确定</el-button>
              
            </div>

            <template #reference>
              <el-button type="mini" @click="">国标</el-button>
            </template>
          </el-popover>

          <el-button type="mini" @click="fenfujunbiao">军标</el-button>
          <el-button type="mini" @click="fenfushiliangwenjian">矢量文件</el-button>
          <el-button type="mini" @click="fenfuzidingyi">指定大小裁切</el-button>
        </el-button-group>
      </el-form-item>
      <el-form-item label="分幅数"> 12 </el-form-item>
      <!--<el-form-item label="保存路径">-->
      <!--  <el-input v-model="form.desc" type="text" />-->
      <!--</el-form-item>-->
      <el-form-item label="投影方式">
        <el-radio-group v-model="form.ceshi">
          <el-radio value="Sponsor">经纬度</el-radio>
          <el-radio value="Venue">墨卡托</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="格式">
        <el-radio-group v-model="form.ceshi">
          <el-radio value="Sponsor">瓦片(png)</el-radio>
          <el-radio value="Sponsor">瓦片(jpg)</el-radio>
          <el-radio value="Sponsor">拼接(TIF)</el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item>
        <el-table :data="tableData" style="width: 100%" height="200">
          <el-table-column type="selection" width="55" />
          <el-table-column property="jibie" label="级别" width="70"/>
          <el-table-column property="chicun" label="尺寸" />
          <el-table-column property="daxiao" label="理论总大小" width="100"/>
        </el-table>
      </el-form-item>
      <el-form-item>
        <div class="btns" style="display: flex; width: 100%; justify-content: center">
          <el-button type="primary" @click="onSubmit">创建任务</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// import ToolItem from '@/components/map/tools/ToolItem.vue'

import _ from "lodash";

import plot from "../../plot/plot.js";

import { makeStandardMapGrids } from "./useFenFu.js";

let pickEntity = null;
export default {
  name: "",
  components: {
    // ToolItem,
  },
  data() {
    return {
      dck: [],
      treedata: [],
      defaultProps: {
        label: "label",
      },
      tableData: [
        {jibie: 5,chicun: '1000*1000',daxiao: '10MB'},
        {jibie: 6,chicun: '10000*10000',daxiao: '1GB'},
        {jibie: 7,chicun: '100000*100000',daxiao: '10GB'},
        {jibie: 8,chicun: '1000000*1000000',daxiao: '100GB'},
        {jibie: 9,chicun: '10000000*10000000',daxiao: '0.5tb'},
        {jibie: 10,chicun: '100000000*100000000',daxiao: '1tb'},
      ],
      iftree: false,
      form: {
        resource: "",
      },
    };
  },
  computed: {},
  // inject: ['activeTool','activeToolParent'],
  watch: {},
  mounted() {
    console.log(55555);

    setTimeout(() => {
      let _layer = new Cesium.CustomDataSource("plotlayer");
      viewer.dataSources.add(_layer);
      this._player = _layer;
      this._p = new plot(viewer);
    }, 1000);
  },
  beforeDestroy() {
    this._disposers.forEach((d) => d());
    this._disposers.length = 0;
  },
  methods: {
    reset() {
      this._p.removeall();
    },

    fenfuguobiao() {
      console.log(this._fenfujson);

      this._fenfujson.features.map((item) => {
        item.geometry.coordinates;
        console.log(item.geometry.coordinates[0].flat());
        viewer.entities.add({
          position: Cesium.Cartesian3.fromDegrees(
            (item.geometry.coordinates[0][0][0] + item.geometry.coordinates[0][1][0]) / 2,
            (item.geometry.coordinates[0][1][1] + item.geometry.coordinates[0][2][1]) / 2
          ),

          label: {
            text:
              item.properties.ID + "\n" + item.properties.fanwei.split(" ").join("\n"),
          },
          polyline: {
            positions: new Cesium.CallbackProperty(function () {
              return Cesium.Cartesian3.fromDegreesArray(
                item.geometry.coordinates[0].flat()
              );
            }, false),
            // positions: Cesium.Cartesian3.fromDegreesArray(item.geometry.coordinates[0].flat()),
            // hierarchy: Cesium.Cartesian3.fromDegreesArray(item.geometry.coordinates[0].flat()),
            width: 3,
            material: Cesium.Color.YELLOW.withAlpha(0.5),
          },
        });
      });

      // Cesium.GeoJsonDataSource.load(this._fenfujson)
      //   .then(function (dataSource) {
      //     // 将加载的数据添加到Cesium Viewer中
      //     // viewer.dataSources.add(dataSource);

      //     // 设置数据的样式
      //     // var entities = dataSource.entities.values;
      //     // for (var i = 0; i < entities.length; i++) {
      //     //   var entity = entities[i];
      //     //   entity.point = {
      //     //     pixelSize: 10,
      //     //     color: Cesium.Color.RED,
      //     //   };
      //     // }

      //     // 将地图视角调整到加载的数据范围
      //     // viewer.zoomTo(dataSource);
      //   })
      //   .otherwise(function (error) {
      //     console.error("加载GeoJSON数据时出现错误：", error);
      //   });
    },

    

    qingkongclick() {},
    closewindow() {
      this.qingkongclick();
    },
  },
};
</script>

<style lang="scss">
.el-tree {
  background-color: #0000 !important;
  color: white;
}

.wh {
  width: 100%;
  height: 100%;
}
</style>
